import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { message } from 'antd';
import Login from '@react-login-page/page3';
import defaultBannerImage from '@react-login-page/page3/bg.jpeg';
import { Email, Password, Submit, Reset, Welcome } from '@react-login-page/page3';
import { loginApi } from '@/api/login';
import { useDispatch } from 'react-redux'
import { setToken, setUser } from '@/store/reducers/auth'



export default function LoginPage() {
  const nvigate = useNavigate()
  const [userName, setUserName] = useState('');
  const [userPassword, setUserPassword] = useState('');
  const dispatch = useDispatch()

  const handleSubmit = (e) => {
    e.preventDefault();
    login(userName, userPassword)
  };

  const login = async (email, password) => {
    const res = await loginApi({ "email": email, "password": password })
    if (res.code === 200) {
      dispatch(setToken(res.data.token))
      dispatch(setUser(res.data.user))
      message.success('登录成功！')
      nvigate('/home')
    } else {
      message.error('账号或密码错误！')
    }

  }

  return (
    <form onSubmit={handleSubmit} style={{ height: 580 }}>
      <Login>
        <Email
          name="userUserName"
          value={userName}
          onChange={(e) => setUserName(e.target.value)}
        />
        <Password
          placeholder="请输入密码"
          label="密码"
          name="userPassword"
          value={userPassword}
          onChange={(e) => setUserPassword(e.target.value)}
        />
        <Submit type="submit">提交</Submit>
        <Reset disabled>重置</Reset>
        <Welcome>欢迎登录知了OA管理系统：</Welcome>

        <Login.Banner style={{ backgroundImage: `url(${defaultBannerImage})` }} />
      </Login>
    </form>
  );
}
